<template>
  <div class="content-width content-width-min">
    <div class="container" style="padding-top: 20px">
    <div class="zone">
      <div class="zone_list" >
        <div class="zone_video"  v-for="item in zonelist" :key="item.id">
          <a
            href="https://www.dance365.com/discovery/special_zone?zoneId=ff80808176f5683b0176f9ae53656bd9&filter=%255B%257B%2522filterCode%2522%253A%2522subject%2522%252C%2522filterValue%2522%253A%255B%2522all%2522%255D%257D%255D&showAllSign=0&selectOrder=integrated"
            ><img
              style="
                margin-bottom: 20px;
                width: 286px;
                height: 156px;
                border-radius: 4px;
              "
              :src="item.cover"
              alt=""
          /></a>
        </div>
      </div>
    </div>
  </div>
    
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "ZoneList",
});
</script>

<script lang="ts" setup>
import {reqZoneList} from "@/api/discovery"
import {ref,onMounted} from "vue"
const pageSize = ref(16)
const zonelist = ref<any>([]);
onMounted(() => {
  getVideoList()
})
const getVideoList = async () => {
  const res = await reqZoneList(pageSize.value);
  // console.log(res.content)
  zonelist.value = res.content;
  // console.log(zonelist.value);
};
</script>

<style lang="scss" scoped>
.box{
  width: 200px;
  height: 150px;
  background-color: aquat;
}
.content-width-min {
  min-width: 1200px;
}
.container{
  display: flex;
}
.content-width {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.zone_list{
  display: flex;
  flex-wrap: wrap;
}
.zone_video {
  margin: auto 7px;
}
</style>
